<template>
  <view class="read-task-content">
    <popup ref="popup" :isMaskClick="isMaskClick" @change="popupChange">
      <view class="popup-container display-center" style="width: 85%">
        <view class="color-title">
          <text class="color-text">完成阅读任务</text>
          <view class="next-text-box">
            <text class="next-text">即可进入下一步</text>
          </view>
        </view>

        <view class="list-wrap">
          <view
            class="list-item"
            v-for="(item, index) in readarticles"
            :key="item.id"
            @click="toRead(item, index)"
          >
            <view class="article-name">
              {{ item.newsTitle }}
            </view>
            <view class="to-read-box">
              <button class="to-read" :class="!item.read && 'can-active'">
                {{ item.read ? '已完成' : '待完成' }}
              </button>
            </view>
          </view>
        </view>
        <view class="to-grab-box">
          <button
            class="to-grab"
            :class="isAllRead && 'can-active'"
            @click="isAllRead && $emit('close')"
          >
            立即进入（{{ completeTaskNum }}/{{ readarticles.length }}）
          </button>
        </view>
      </view>
    </popup>
  </view>
</template>

<script>
  import * as Api from '@/server/index.js';
  import * as Utils from '@/utils/index.js';
  import popup from '@/components/popup/index.vue';

  export default {
    name: 'readTask',
    components: {
      popup,
    },
    props: {
      buzId: {
        type: String,
        require: true,
      },
      isMaskClick: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        readarticles: [], // 阅读文章
        readNum: 0, // 阅读数量
      };
    },
    computed: {
      // 是否完成
      isAllRead() {
        const isAllRead = this.readarticles.every((item) => item.read);
        return isAllRead;
      },
      completeTaskNum() {
        return this.readarticles.filter((item) => item.read).length;
      },
    },
    async mounted() {
      await this.$onLaunched;
      this.$nextTick(() => {
        this.init_load();
      });
    },
    methods: {
      async init_load() {
        await this.isComplete();
        await this.getArticleSnapshot();
        /* if (!this.isAllRead) {
          // 没有完成指定日期任务
          this.open();
        } */
      },
      /**
       * 查询阅读数量
       */
      async isComplete() {
        uni.showLoading({
          title: '加载中...',
          mask: true,
        });

        try {
          const { data: res } = await Api.readTask.isComplete({ buzId: this.buzId });
          this.readNum = res.data;
        } catch (error) {
          console.log('error', error);
        } finally {
          uni.hideLoading();
        }
      },
      /**
       * 获取指定时间的阅读文章列表及详情
       */
      async getArticleSnapshot() {
        uni.showLoading({
          title: '加载中...',
          mask: true,
        });

        try {
          const { data: res } = await Api.readTask.getArticleSnapshot({ buzId: this.buzId });
          this.readarticles = res.data;
        } catch (error) {
          console.log('error', error);
        } finally {
          uni.hideLoading();
        }
      },
      /**
       * 阅读文章
       */
      async read(item, index) {
        const params = {
          buzId: this.buzId,
          articleId: item.articleId,
          timestamp: new Date().getTime(),
          index: index,
        };
        try {
          const { data: res } = await Api.readTask.read(params);
          return true;
        } catch (error) {
          console.log('error', error);
          return false;
        } finally {
        }
      },
      /**
       * 阅读文章按钮
       * @param {Object} item
       * @param {Number} index 占位索引
       */
      async toRead(item, index) {
        this.h5uniNavTo(item.sourceArticleId);

        if (!item.read && (await this.read(item, index))) {
          // console.log('-阅读成功-');
          const timer = setTimeout(() => {
            clearTimeout(timer);
            item.read = true;
          }, 1000);
        }
      },
      // 判断是否完成前置
      async isReadTaskFinish() {
        const complete = this.isAllRead;
        if (!complete) {
          // 没有完成指定日期任务
          uni.showModal({
            title: '提示',
            content: '请先完成阅读任务',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.getArticleSnapshot();
                this.open();
              }
            },
          });
        }
        return complete;
      },
      h5uniNavTo(id) {
        h5uni.navigateTo({
          url: `/pages/shows/index?id=${id}`,
        });
        /* const url = encodeURIComponent(link);
        h5uni.navigateTo({
          url: `/pages/webview/index?url=${url}`,
        }); */
      },
      open() {
        this.$refs.popup.open();
      },
      close() {
        this.$refs.popup.close();
      },
      popupChange(e) {},
    },
  };
</script>

<style lang="scss" scoped>
  .read-task-content {
    position: relative;
    z-index: 991;
  }
  .popup-container {
    // width: 80%;
    padding: 20rpx;
    border-radius: 24rpx;
    background-color: #fff;
  }

  .color-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    font-weight: 700;

    .color-text {
      background: linear-gradient(to bottom, #fbe50a, #dbad37);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .next-text-box {
      padding: 4rpx 40rpx;
      margin: 10rpx 20rpx 20rpx 20rpx;
      border-radius: 40rpx;
      background-color: #e1a95ebf;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .next-text {
      font-size: 32rpx;
      background: linear-gradient(to bottom, #c38a2c, #a7672e);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .list-wrap {
  }
  .list-item {
    display: flex;
    align-items: center;
    background-color: #ffece0;
    border-radius: 10rpx;
    margin-bottom: 30rpx;
  }
  .article-name {
    flex: 1;
    flex-shrink: 0;
    padding: 10rpx 0 10rpx 20rpx;
    font-size: 26rpx;
    color: #333;
  }
  .to-read-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180rpx;
    height: 80rpx;
  }
  .to-read {
    font-size: 24rpx;
    background-color: #999;
    width: 140rpx;
    height: 50rpx;
    border-radius: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .can-active {
    background-color: #ed6b37 !important;
  }

  .to-grab-box {
    width: 100%;
    margin-top: 40rpx;
    text-align: center;
  }
  .to-grab {
    width: 50%;
    font-size: 24rpx;
    background-color: #999;
    border-radius: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
</style>
